<template class="task-template">
  <section id="musicmgr-section" class="section js-section u-category-manager">
    <div class="page-header">
      <h1>　音乐库 <small> / Music library</small></h1>
    </div>

    <div class="my_trace" style="width: 90%;margin: auto;background: #eee;">
      <p style="text-align: center;">音乐轨道显示区域，请勾选文件并选择音轨导入~ </p>
      <div id="top-bar" class="playlist-top-bar" style="visibility: hidden;">
        <div class="playlist-toolbar">
          <div class="btn-group">
            <span class="btn-pause btn btn-warning">
              <i class="glyphicon glyphicon-pause"></i>
            </span>
            <span class="btn-play btn btn-success">
              <i class="glyphicon glyphicon-play"></i>
            </span>
            <span class="btn-stop btn btn-danger">
              <i class="glyphicon glyphicon-stop"></i>
            </span>
            <span class="btn-rewind btn btn-success">
              <i class="glyphicon glyphicon-fast-backward"></i>
            </span>
            <span class="btn-fast-forward btn btn-success">
              <i class="glyphicon glyphicon-fast-forward"></i>
            </span>
          </div>
          <div class="btn-group">
            <span title="zoom in" class="btn-zoom-in btn btn-default">
              <i class="glyphicon glyphicon-zoom-in"></i>
            </span>
            <span title="zoom out" class="btn-zoom-out btn btn-default">
              <i class="glyphicon glyphicon-zoom-out"></i>
            </span>
          </div>
          <div class="btn-group btn-playlist-state-group">
            <span class="btn-cursor btn btn-default active" title="select cursor">
              <i class="glyphicon glyphicon-headphones"></i>
            </span>
            <span class="btn-select btn btn-default" title="select audio region">
              <i class="glyphicon glyphicon-italic"></i>
            </span>
            <span class="btn-shift btn btn-default" title="shift audio in time">
              <i class="glyphicon glyphicon-resize-horizontal"></i>
            </span>
            <span class="btn-fadein btn btn-default" title="set audio fade in">
              <i class="glyphicon glyphicon-arrow-left"></i>
            </span>
            <span class="btn-fadeout btn btn-default" title="set audio fade out">
              <i class="glyphicon glyphicon-arrow-right"></i>
            </span>
          </div>
          <div class="btn-group btn-fade-state-group">
            <span class="btn btn-default btn-logarithmic active">logarithmic</span>
            <span class="btn btn-default btn-linear">linear</span>
            <span class="btn btn-default btn-exponential">exponential</span>
            <span class="btn btn-default btn-scurve">s-curve</span>
          </div>
          <div class="btn-group btn-select-state-group">
            <span class="btn-loop btn btn-success disabled" title="loop a selected segment of audio">
              <i class="glyphicon glyphicon-repeat"></i>
            </span>
            <span title="keep only the selected audio region for a track"
              class="btn-trim-audio btn btn-primary disabled">Trim</span>
          </div>
          <div class="btn-group">
            <span title="Prints playlist info to console" class="btn btn-info">Print</span>
            <span title="Clear the playlist's tracks" class="btn btn-clear btn-danger">Clear</span>
          </div>
          <div class="btn-group">
            <span title="Download the current work as Wav file" class="btn btn-download btn-primary">
              <i class="glyphicon glyphicon-download-alt"></i>
            </span>
          </div>
        </div>
      </div>
      <div id="playlist"></div>
      <div class="playlist-bottom-bar" style="visibility: hidden;">
        <form class="form-inline">
          <!-- <select class="time-format form-control">
            <option value="seconds">seconds</option>
            <option value="thousandths">thousandths</option>
            <option value="hh:mm:ss">hh:mm:ss</option>
            <option value="hh:mm:ss.u">hh:mm:ss + tenths</option>
            <option value="hh:mm:ss.uu">hh:mm:ss + hundredths</option>
            <option value="hh:mm:ss.uuu" selected="selected">hh:mm:ss + milliseconds</option>
          </select>
          <input type="text" class="audio-start input-small form-control">
          <input type="text" class="audio-end form-control"> -->
          <label class="audio-pos"></label>
        </form>

        <form class="form-inline">
          <div class="form-group">
            <label for="master-gain">Master Volume</label>
            <input type="range" min="0" max="100" value="100" class="master-gain form-control" id="master-gain">
          </div>
          <div class="checkbox">
            <label>
                &nbsp;&nbsp;&nbsp;
              <input type="checkbox" class="automatic-scroll"> Automatic Scroll
            </label>
          </div>
        </form>
        <!-- <form class="form-inline">
          <div class="control-group">
            <label for="time">Seek to time :</label>
            <input type="number" class="form-control" value="100" id="seektime">
            <span class="btn btn-primary btn-seektotime">Seek !</span>
          </div>
        </form> -->
        <!-- <div class="sound-status">Master volume now has volume 100.</div> -->
        <!-- <div class="track-drop"></div> -->
        <!-- <div class="loading-data"></div> -->
      </div>

    </div>
    <header>
      <div class="section-wrapper">
        <div class="panel panel-default res-terms-container"
          style="float:left;border:none;margin: 0;height: 30px;line-height: 30px;overflow: hidden;">
          <input id="inputSearch-music" type="text"
            style="width: 300px;height: 100%;border-radius: 5px;border: 1px solid #ccc;padding: 0 10px;"
            placeholder="搜索更多（多标签用空格分隔）" value="" />
        </div>
        <span id="btnImport-music" class="btn btn-default btn-sm" style="float:right">导入</span>
        <span id="btnClean-music" class="btn btn-default btn-sm" style="float:right">清理</span>
        <!-- <span id="btnPlay-music" class="btn btn-default btn-sm" style="float:right">播放</span> -->
        <span style="float:right;height: 30px;line-height: 30px;padding-right: 15px;">音效资源总数:<strong
            id='total-music'></strong>首</span>
      </div>
      <style>
        #playlist {
          box-sizing: border-box;
          width: 100%;
          min-height: 100px;
        }
      </style>
    </header>
    <div class="main-container">
      <div>
        <div class="main-container-row bgcolor-light-grey-linear border-bottom-grey">
          <div class="main-container-screen-narrow">
            <!-- <div class="panel panel-default res-terms-container">
                            <input id="inputSearch-music" type="text" style="width: 100%;height: 100%;" placeholder="多标签用空格分隔"
                                value="" />
                        </div> -->
            <div class="panel panel-default" style="margin: 0 0 10px 0;padding: 2px 11px;">
              <span>1级标签</span>
              <span id="MainTagList-music"></span>
            </div>
            <div id="ChildTagPanel-music" class="panel panel-default tag-pannel"
              style="margin: 0 0 10px 0;padding: 2px 11px;">
              <span>2级标签</span>
              <span id="ChildTagList-music"></span>
            </div>
            <div id="GrandsonTagPanel-music" class="panel panel-default tag-pannel"
              style="margin: 0 0 10px 0;padding: 2px 11px;">
              <span>3级标签</span>
              <span id="GrandsonTagList-music"></span>
              <input id="inputTip-music" type="text" class="min-input term-range btn btn-default btn-sm"
                style="margin:1px;width:100px;" placeholder="自定义标签" />
              <span id='newtag-music' class='btn btn-default btn-sm'>
                <i class='icon-plus'></i>
              </span>
            </div>
          </div>
        </div>
        <div class="main-container-row bgcolor-light-grey-linear" style="padding: 10px 0 20px 0;">
          <div class="main-container-screen-narrow">
            <div class="res-tab-content-Detail">
              <div class="item-info-list-box"></div>
              <div style="height: 55px">
                <div class="dropdown btn-sm" style="display:inline;padding-left: 0;">
                  <button id='SelectAll-music' class='btn btn-default btn-sm'>
                    <i id="iCheck-music" class='icon-ok'></i>
                    <span id="sCheck-music">全选</span>
                  </button>
                </div>
                <div class="dropdown btn-sm" style="display:inline">
                  <button id="DownloadAll-music" class='fav-btn btn btn-default btn-sm'>
                    <i class='icon-download'></i>
                    <span>批量下载</span>
                  </button>
                </div>
                <div class="dropdown btn-sm" style="display:inline">
                  <button id="DeleteAll-music" class='fav-btn btn btn-default btn-sm'>
                    <i class='icon-trash'></i>
                    <span>批量删除</span>
                  </button>
                </div>
                <div class="dropdown btn-sm" style="display:inline">
                  <button type="button" class="btn btn-default btn-sm">
                    <i class='icon-plus'></i>
                    <span>批量加标签</span>
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                    </button>
                  </button>
                  <ul class="dropdown-menu" id="AddTagAll-music">
                  </ul>
                </div>
                <div class="dropdown btn-sm" style="display:inline">
                  <button type="button" class="btn btn-default btn-sm">
                    <i class='icon-minus'></i>
                    <span>批量去标签</span>
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                    </button>
                  </button>
                  <ul class="dropdown-menu" id="RemoveTagAll-music">
                  </ul>
                </div>
                <div class="dropdown btn-sm open_file" style="display:inline">
                  <button id="DeleteAll-music" class='fav-btn btn btn-default btn-sm'>
                    <i class='glyphicon glyphicon-folder-open'></i>
                    <span>打开下载文件</span>
                  </button>
                </div>
                <div class="dropdown btn-sm disabled" id="mu_import" style="display:inline">
                  <button id="DeleteAll-music" class='fav-btn btn btn-default btn-sm'>
                    <i class='glyphicon glyphicon-hourglass'></i>
                    <span>音轨导入</span>
                  </button>
                </div>
              </div>
              <div class="item-info-page-nav" style="height: 30px;margin-top:-5px;margin-bottom:5px;">
                <div id="pagination-music" class="pagination" style="margin:0px;"></div>
              </div>
              <span id="resourceList-music" class="resource-container">
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- <p draggable="true" id="dragtest" class="dragitem" key='123456'>这是一个可拖动的段落。</p> -->
      <!-- <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/> -->
    </div>

    <script type="text/javascript">
      require('./renderer-process/musicmgr')
      require('./renderer-process/playlist')
    </script>
  </section>
</template>